import React, { useRef, useEffect, useState } from 'react'

import { Card, Avatar, Table } from 'antd'
import * as echarts from 'echarts'
import './Home.css'
import axios from '../utils/axios'
import api from '../api/index'
const Home = () => {
  const [dataSource, setDataSource] = useState([])
  const [total, setTotal] = useState({
    count: '',
    count1: '',
    count2: '',
  })
  const [count, setCount] = useState({
    teacherTotal: '',
    studentTotal: '',
    parentsTotal: '',
  })
  const getCount = () => {
    axios.post(api.schoolApi.getCount).then((res) => {
      // console.log(res)
      // res.data.data.map((item) => {
      //   console.log(item[0])
      //   setCount(item[0].matterTotal)
      // })
      setTotal({
        ...total,
        count: res.data.data[0][0].assessmentTotal,
        count1: res.data.data[1][0].matterTotal,
        count2: res.data.data[2][0].sickTotal,
      })
    })
  }
  const getTotal = () => {
    axios.post(api.schoolApi.getCount1).then((res) => {
      console.log(res)
      setCount({
        ...count,
        teacherTotal: res.data.data[0][0].teacherTotal,
        studentTotal: res.data.data[1][0].studentTotal,
        parentsTotal: res.data.data[2][0].parentsTotal,
      })
    })
  }

  const getMessage = () => {
    axios.get(api.schoolApi.getMessage).then((res) => {
      // console.log(res.data.data)
     
      let result = []
      res.data.data.map((item) => {
        // console.log(item)
        result.push({
          key: item.id,
          id: item.id,
          name: item.name,
          total: item.total,
        })

        setDataSource(result)
        // console.log(result)
      })
    })
  }
  // console.log(count)
  useEffect(() => {
    getCount()
    getTotal()
    getMessage()
  }, [])
  const columns = [
    {
      title: '排名',
      dataIndex: 'id',
      key: 'id',
      width: 120,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 120,
    },
    {
      title: '累计发布消息数量',
      dataIndex: 'total',
      key: 'total',
      width: 120,
    },
  ]

  const { Meta } = Card
  const chartRef = useRef()
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: ['通知', '公告', '活动', '家园任务', '缴费通知', '选课通知'],
        axisLine: {
          lineStyle: {
            color: '#7e9fb6',
          },
        },
        axisLabel: {
          // margin: 10,
          color: '#7e9fb6',
          textStyle: {
            fontSize: 8,
          },
        },
      },
    ],
    yAxis: [
      {
        name: '单位：次',
        axisLabel: {
          color: '#7e9fb6',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#7e9fb6',
          },
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(126,159,182,0.12)',
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        data: [50, 26, 13, 13, 20, 15],
        barWidth: '20px',
        itemStyle: {
          color: '#6EC3C9',
        },
      },
    ],
  }
  useEffect(() => {
    const chart = echarts.init(chartRef.current)
    chart.setOption(options)
    return () => {
      chart.dispose()
    }
  }, [])
  return (
    <>
      <div className="box">
        <div className="container">
          <div className="header">
            <div className="left">
              <img src="src/assets/react.svg" alt="" />
              <div>
                <p>好好学习,天天向上</p>
                <p>智慧校园 | 超级管理员</p>
              </div>
            </div>
            <div className="right">
              <ul>
                <li>
                  <p className="li_item">未读通知</p>
                  <p className="li_num">56</p>
                </li>
                <li>
                  <p className="li_item">待审核相册</p>
                  <p className="li_num">3</p>
                </li>
                <li>
                  <p className="li_item">活跃排名</p>
                  <p className="li_num">
                    56
                    <span style={{ fontSize: '16px', color: '#ccc' }}>
                      /110
                    </span>
                  </p>
                </li>
              </ul>
            </div>
          </div>
          <div className="selection">
            <div>
              <Card
                title="本单位信息"
                style={{
                  width: 365,
                  height: 159,
                }}>
                <Meta
                  avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                  title="智慧校园"
                  description="所属区域：成都高新区"
                />
              </Card>
            </div>
            <div>
              <Card
                title="今日简报"
                style={{
                  width: 365,
                  height: 159,
                }}>
                <div className="Number">
                  <p>
                    <span
                      style={{
                        color: 'rgb(95, 183, 65)',
                        fontWeight: 'bold',
                        fontSize: '20px',
                      }}>
                      {total.count}
                    </span>
                    <span>出勤人数</span>
                  </p>
                  <p>
                    <span
                      style={{
                        color: 'orange',
                        fontWeight: 'bold',
                        fontSize: '20px',
                      }}>
                      {total.count1}
                    </span>
                    <span>事假人数</span>
                  </p>
                  <p>
                    <span
                      style={{
                        color: 'red',
                        fontWeight: 'bold',
                        fontSize: '20px',
                      }}>
                      {total.count2}
                    </span>
                    <span>病假人数</span>
                  </p>
                </div>
              </Card>
            </div>
            <div>
              <Card
                title="快捷应用"
                style={{
                  width: 700,
                  height: 159,
                }}>
                <div className="apply">
                  <div>
                    <img src="src/assets/react.svg" alt="" />
                    <p>发布通知</p>
                  </div>
                  <div>
                    <img src="src/assets/react.svg" alt="" />
                    <p>发布通知</p>
                  </div>
                  <div>
                    <img src="src/assets/react.svg" alt="" />
                    <p>发布通知</p>
                  </div>
                  <div>
                    <img src="src/assets/react.svg" alt="" />
                    <p>发布通知</p>
                  </div>
                </div>
              </Card>
            </div>
          </div>
          <div className="selection1">
            <Card
              title="发布消息统计"
              extra={<a href="#">查看详细</a>}
              style={{
                width: 750,
              }}>
              <div
                style={{ width: '720px', height: '400px' }}
                ref={chartRef}></div>
            </Card>
            <Card
              title="用户活跃排行"
              extra={<a href="#">查看详细</a>}
              style={{
                width: 348,
              }}>
              <Table
                pagination={false}
                dataSource={dataSource}
                columns={columns}
              />
            </Card>
            <Card
              title="发布消息统计"
              extra={<a href="#">更多</a>}
              style={{
                width: 348,
              }}>
              <div className="box1 item">
                <p style={{ color: 'rgb(89, 183, 255)' }}>
                  学生数量(人)：{count.studentTotal}
                </p>
                <img src="src/assets/react.svg" alt="" />
              </div>
              <div className="box1 item1">
                <p style={{ color: 'rgb(254, 143, 93)' }}>
                  家长数量(人)：{count.parentsTotal}
                </p>
                <img src="src/assets/react.svg" alt="" />
              </div>
              <div className="box1 item2">
                <p style={{ color: 'rgb(156, 183, 65)' }}>
                  老师数量(人)：{count.teacherTotal}
                </p>
                <img src="src/assets/react.svg" alt="" />
              </div>
            </Card>
          </div>
        </div>
      </div>
    </>
  )
}

export default Home
